<template>
    <div class="new-grid file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form">
                    <div class="form-item flex">
                        <div class="label">仿真类型:</div>
                        <pui-radio-group v-model="componentRef.emulationType" :list="componentRef.emulationTypeList"></pui-radio-group>
                    </div>
                    <div class="form-item">
                        <div class="label">仿真工程名称</div>
                        <!-- <pui-input placeholder="请输入仿真工程名称" v-model="componentRef.gridName" type="input" clearAble full></pui-input> -->
                        <div class="select-content">
                            <input type="text" placeholder="请输入仿真工程名称" class="pui-input input" v-model="componentRef.gridName" @input="onGridNameInput">
                            <pui-selector :dataList="componentRef.fileTypeList" v-model="componentRef.projectType"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">保存路径</div>
                        <pui-input disabled :placeholder="componentRef.dirPath" v-model="componentRef.dirPath" type="input" full icon="folder-open" iconPosition="right" @onIconClick="openFolderBrowser"></pui-input>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="createNewGrid" type="primary">创建</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { fsToS, umToM } from '@/utils'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
import { PhotGrid } from '@/common/types/phot_types'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '新建无源器件仿真工程'
    },
    animate: {
        type: String,
        default: 'fade'
    },
    directoryPath: {
        type: String,
        default: './photlab'
    }
})
const emit = defineEmits({
    openFolderBrowser: (val: any) => {},
    onClose: (val: any) => {},
    sendGridData: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    gridName: 'phot-grid-',
    projectType: 1, // 0 系统仿真 1 器件仿真
    address: './photlab',
    showMoreSetting: false,
    photGrid: new PhotGrid(),
    curIdx: 1,
    dirPath: '',
    fileTypeList: [
        { label: '.phtg', value: 0 },
        { label: '.phtd', value: 1 },
    ],
    emulationTypeList: [
        {
            value: '2D',
            label: '2D仿真'
        },
        {
            value: '3D',
            label: '3D仿真'
        },
    ],
    emulationType: '2D'
}) as any
watch([() => props.directoryPath],(v1) => {
    componentRef.dirPath = props.directoryPath + (componentRef.gridName ? '/' + componentRef.gridName : '')
})
const onGridNameInput = async (e: any) => {
    componentRef.dirPath = props.directoryPath + (componentRef.gridName ? '/' + componentRef.gridName : '')
}
const init = () => {
    console.log(props.directoryPath)
    componentRef.gridName = 'phot-grid-' + componentRef.curIdx
    componentRef.photGrid = new PhotGrid()
    componentRef.dirPath = props.directoryPath + (componentRef.gridName ? '/' + componentRef.gridName : '')
    componentRef.dialogVisible = true
    console.log(componentRef.photGrid )
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}

const createNewGrid = async () => {
    try {
        proxy.$loading.open('正在创建...')
        componentRef.photGrid.name = componentRef.gridName
        componentRef.photGrid.grid_type = componentRef.emulationType
        componentRef.photGrid.xLength = umToM(componentRef.photGrid.xLength)
        componentRef.photGrid.yLength = umToM(componentRef.photGrid.yLength)
        componentRef.photGrid.zLength = umToM(componentRef.photGrid.zLength)
        componentRef.photGrid.pmlWidthX = umToM(componentRef.photGrid.pmlWidthX)
        componentRef.photGrid.pmlWidthY = umToM(componentRef.photGrid.pmlWidthY)
        componentRef.photGrid.pmlWidthZ = umToM(componentRef.photGrid.pmlWidthZ)
        componentRef.photGrid.waveLength = umToM(componentRef.photGrid.waveLength)
        componentRef.photGrid.gridSpacing = umToM(componentRef.photGrid.gridSpacing)
        componentRef.photGrid.totalTime = fsToS(componentRef.photGrid.totalTime)
        await deviceManager.addGrid(componentRef.photGrid)
        await deviceManager.saveGridAs(componentRef.dirPath + '/' + componentRef.gridName + '.phtd')
        emit('sendGridData', {name: componentRef.gridName, path: componentRef.dirPath + '/' + componentRef.gridName + '.phtd' , gridId: deviceManager.photGridId})
        proxy.$loading.close()
        componentRef.curIdx++
        closeDialog()
        proxy.$toast({
            value: '成功',
            type: 'success'
        })
    } catch (error) {
        console.log(error)
        proxy.$loading.close()
        proxy.$toast({
            value: '系统错误，请稍后尝试',
            type: 'error'
        })
    }
}
const openFolderBrowser = () => {
    emit('openFolderBrowser', 'new grid')
}

const showSetting = () => {
    componentRef.showMoreSetting = true
}

const resetPhotGrid = () => {
    componentRef.photGrid = new PhotGrid()
}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>